<template>
    <fieldset>
        <legend>tab栏切换</legend>
        <button v-for="item of arr" :key="item.age" @click="btn(item)" :class="{active:item===msg}">{{item}}</button>
        <div :is="msg"></div>
        
    </fieldset>

</template>
<script>
import name from './name.vue'
import hobby from './hobby.vue'
import age from './age.vue'
import sex from './sex.vue'
    export default{
        data () {
            return {
                arr:['name','age','hobby','sex'],
                msg:'name'  
            }
        },
        components:{
            name,
            hobby,
            age,
            sex
        },
        methods: {
            btn(item){
                this.msg=item
            }
        }
    }
</script>
<style>
    .active{
        background-color: aqua;
    }




</style>